@keyframes reel-spread-out {
  0% {
    transform: translateX(0%);
  }
  10% {
    transform: translateX(1150%);
  }
  90% {
    transform: translateX(1150%);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes painting-spread-out {
  0% {
    transform: scaleX(0);
  }
  10% {
    transform: scaleX(1);
  }
  90% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

@keyframes flap-left {
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(10deg);
  }
  35% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
  65% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(10deg);
  }
  95% {
    transform: rotate(0deg);
  }
  100% {
    //   top: 32%;
      transform: skewY(0deg);
  }
}
@keyframes flap-right {
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  35% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  65% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(-10deg);
  }
  95% {
    transform: rotate(0deg);
  }
  100% {
    //   top: 32%;
      transform: skewY(0deg);
  }
}
@keyframes hatBreath {
  0% {
      transform: translateY(0%) scaleY(1);
  }
  15% {
      transform: translateY(5%);
  }
  25% {
      transform: translateY(0%) scaleY(1);
  }
  35% {
      transform: translateY(5%);
  }
  50% {
      transform: translateY(0%) scaleY(1);
  }
  100% {
      transform: translateY(0%) scaleY(1);
  }
}
@keyframes spell-inner {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(80%);
  }
}
.owl.wizard {
  .body {
    .wings.spread {
      .left {
        top: 25.8%;
        transform-origin: 100% 60%;
      }
      .right {
        top: 25.8%;
        transform-origin: 0% 40%;
      }
    }
    .hat {
      position: absolute;
      left: 21.1%;
      top: -13%;
      height: 32%;
    }
    .clothes {
      position: absolute;
      left: 21.1%;
      top: 38.5%;
      height: 43.5%;
    }
    .health {
        top: -25%;
    }
    .reel {
      overflow: hidden;
      visibility: hidden;
      position: absolute;
      top: -200%;
      left: 50%;
      width: 100%;
      height: 55%;
      transform: translate(-50%, 0%);
      transition: all .2s ease 0s;
      .reel-left {
        z-index: 1;
        position: absolute;
        left: 0;
        width: 8%;
        height: 100%;
        background: transparent url('../images/skin/reel.png') no-repeat center center / contain;
      }
      .reel-right {
        z-index: 1;
        position: absolute;
        top: 0;
        right: 92%;
        width: 8%;
        height: 100%;
        background: transparent url('../images/skin/reel.png') no-repeat center center / contain;
        transform-origin: left;
        transform: translateX(0%);
      }
      .painting {
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        transform-origin: left;
        transform: scaleX(0);
        .inner {
          position: absolute;
          top: 19.5%;
          // left: .75rem;
          // width: 13.5rem;
          height: 61%;
          white-space: nowrap;
          li {
            // visibility: hidden;
            display: inline-block;
            background-image: url('../images/skin/silk.jpg');
            background-size: auto 100%;
            list-style: none;
            transition: all .4s linear 0s;
          }
        }
      }
    }
    .spell {
      visibility: hidden;
      overflow: hidden;
      position: absolute;
      top: -50%;
      left: 16%;
      width: 60%;
      height: 130%;
      // background: rgba(0, 0, 0, 0.5);
      .inner {
        visibility: hidden;
        position: absolute;
        bottom: 0%;
        left: 0%;
        width: 100%;
        height: 400%;
        font-size: 12px;
        transform: translateY(0);
        // background: linear-gradient(180deg, red, yellow);
      }
    }
  }

}
.owl.fly {
  .body {
    .wings.folded {
      visibility: hidden;
    }
    .wings.spread {
      .left {
        animation: flap-left 1.2s ease .3s 1;
      }
      .right {
        animation: flap-right 1.2s ease .3s 1;
      }
    }
    .reel {
      visibility: visible;
    //   top: -90%;
      transform: translate(-50%, 200%);
      .painting {
        animation: painting-spread-out 2s linear .2s;
      }
      .reel-right {
        animation: reel-spread-out 2s linear .2s;
      }
    }
    .spell {
      .inner {
        visibility: visible;
        animation: spell-inner 1.8s linear .2s;
      }
    }
  }
}